import React,{useState} from 'react'
import { NavBar, Toast,Input } from '@nutui/nutui-react'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom'

export default function Tiany() {
    const [currentLength, setCurrentLength] = useState(0)
    const Navigate=useNavigate()
  return (
    <div>
 <NavBar
        back={
          <>
         
            取消
          </>
        }
        right={
          <span className="flex-center" >
            <div  
                onClick={()=>{
                    Navigate("/erb")
                }}
          
            style={{padding:'8px',width:'55px',color:"white",textAlign:'center',backgroundColor:'rgb(32,200,116)',borderRadius:'20px'}}>下一步</div>
          </span>
        }
        onBackClick={()=>{
            Navigate(-1)
        }}
      >
        发起一起跑
      </NavBar>
    <div>
    <div
        style={{
          display: 'flex',
          alignItems: 'center',
          background: '#fff',
          padding: '0 10px',
          paddingBottom:"50px",
          borderBottom:'1px solid rgb(247,247,247)'
        }}
      >
        <Input
          type="text"
          maxLength={20}
          placeholder='标题限 5 ~ 30个字'
          style={{fontSize:'18px',color:'black'}}
          onChange={(val) => setCurrentLength(val.length)}
        />
        <div className="right" style={{ fontSize: '12px' }}>
          {currentLength} / 20
        </div>
      </div>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          background: '#fff',
          padding: '0 10px',
          paddingBottom:"50px",
        
        }}
      >
        <Input
          type="text"
          maxLength={20}
          placeholder='备注说明 (限0~300字)'
          style={{fontSize:'15px',color:'black'}}
          onChange={(val) => setCurrentLength(val.length)}
        />
        <div className="right" style={{ fontSize: '12px' ,position:'absolute',right:'20px',bottom:'20px'}}>
          {currentLength} / 300
        </div>
      </div>
    </div>


    </div>
  )
}
